<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>临沂市消防监控系统</title>
    <link rel="stylesheet" href="lib/css/reset.css">
    <link rel="stylesheet" href="lib/css/bootstrop.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="lib/css/elementui.css">
    <script src="lib/js/jquery-3.1.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>

    </style>
    <script src="lib/js/md5.js"></script>
    <script src="lib/js/jquery.cookie.js"></script>
    <script src="../lib/js/uitl.js"></script>
    <script src="../lib/layui/layui.all.js"></script>
</head>
<body>
<div class="login-bj background">
    <h4>临沂市消防监控系统</h4>
    <div class="login_img"></div>
    <div class="login login_tab" >
        <p class="login_title">欢迎登陆</p>
        <div class="form-group">
            <label for="exampleInputEmail1" class="text_user" >用户名:</label>
            <input type="text" class="form-control" id="userId" onblur="upKey()" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1" class="text_user">密&nbsp;&nbsp;&nbsp;码:</label>
            <input type="password" class=" form-control" id="psw" placeholder="请输入密码">
        </div>
        <p style="text-align: right;padding-right: 20px;margin-bottom: 40px">
            <a href="javascript:void(0)" class="tab-text" onclick="phone_tab(this)">手机号登陆</a>
            <a href="javascript:void(0)" class="tab-text" onclick="tab(this)">忘记密码?</a>
        </p>
        <p style="text-align: center">
            <button  class="btn btn-default go_into" id="login">登陆</button>
        </p>
    </div>
    <div class="login active login_tab1" style="display: none">
        <p class="login_title">密码找回</p>
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1" class="text_user">用户名:</label>
                <input type="text" class="form-control " id="exampleInputEmail1" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1" class="text_user">手机号:</label>
                <input type="password" class="form-control form-phone" id="exampleInputPassword1" placeholder="请输入手机号">
                <input href="javascript:void(0)" value="发送验证码" class="send-word" type="button" onclick="settime(this)">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1" class="text_user">验证码:</label>
                <input type="password" class="form-control form-phone" id="cd" placeholder="请输入验证码">
            </div>
            <p style="text-align: right;padding-right: 20px;margin-bottom: 20px"></p>
            <p style="text-align: center">
                <button type="button" class="btn btn-default go_into" style="margin-bottom: 10px">提&nbsp;&nbsp;&nbsp;&nbsp;交</button>
                <button type="button" class="btn btn-default go_into" onclick="conme_back()" >返回登陆页</button>
            </p>
        </form>
    </div>
    <div class="login aa login_tab2" style="display: none">
        <p class="login_title">手机登陆</p>
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1" class="text_user">用户名:</label>
                <input type="text" class="form-control " id="phone" placeholder="请输入手机号">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1" class="text_user">验证码:</label>
                <input type="password" class="form-control form-phone" style="display: inline-block" id="phone_val" placeholder="请输入验证码">
                <input href="javascript:void(0)" value="发送验证码" class="send-word" type="button" style="margin: 0" onclick="settime_phone(this)">
            </div>
            <p style="text-align: right;padding-right: 20px;margin-bottom: 40px"></p>
            <p style="text-align: center">
                <button type="button" class="btn btn-default go_into" style="margin-bottom: 10px" >登&nbsp;&nbsp;&nbsp;&nbsp;陆</button>
                <button type="button" class="btn btn-default go_into" onclick="phone_bakc()" >账号登陆</button>
            </p>
        </form>
    </div>
</div>
</body>
<script src="lib/js/vue.js"></script>
<script src="lib/js/elementui.js"></script>
<script>

    var psw_y = '';
    $(function () {
        $('#login').click(function () {
            login()
        })
    })
    //切换
    function tab() {debugger
        $('.login_tab1').hide()
        $('.active').show()

    }
    function conme_back() {
        $('.login_tab1').show()
        $('.active').hide()
    }
    function phone_tab() {
        $('.login_tab2').hide()
        $('.aa').show()
    }
    function phone_bakc() {
        debugger
        $('.login_tab2').show()
        $('.aa').hide()
    }
    //通过账号拿到密码盐
    function upKey() {
        var loginName =  $("#userId").val();
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "http://221.2.74.114:18802/UserInfoApi/GetUserInfoSalt" ,//url
            data:  JSON.stringify({"UserName":loginName}),
            contentType: 'application/json',
            success: function (result) {
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.state == 1) {
                    psw_y = result.data
                };
                if(result.state == 0 ){
                    layer.msg('账号不存在！', {time: 5000, icon:2});
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $("body").innerHTML = "there is something wrong!";
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    }


document.onkeydown = function (e) { // 回车提交表单
// 兼容FF和IE和Opera
    var theEvent = window.event || e;
    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (code == 13) {
        login()
    }
}



    //登陆
    function login() {
        var loginNames =  $("#userId").val();
        var password  = $("#psw").val() ;
        var hashs = hex_md5(psw_y+'.'+hex_md5(password));
        if(password.length<6||password.length>6){
            layer.msg('密码位数长6-16位！', {time: 5000, icon:2});
        }else {
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                url: "http://221.2.74.114:18802/UserInfoApi/GetUserRoleFireManRelationByLoginNameAndPwd" ,//url
                data: JSON.stringify({'LoginName':loginNames,'PassWord':hashs}),
                contentType: 'application/json',
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.state == 1) {
                        var User_salt = result.data.UserRoleRelationModel.User_salt ; //密码盐
                        FireManInfoModel = JSON.stringify(result.data.FireManInfoModel);
                        UserRoleRelationModel =JSON.stringify(result.data.UserRoleRelationModel);
                        localStorage.setItem('msg', FireManInfoModel);
                        localStorage.setItem('item', UserRoleRelationModel);
                        var token =  User_salt;
                        $.cookie(
                            'token',token,{ expires: 7 ,path: '/' }
                        )
                        window.location.href='./pages/fire_main.html?loginNames='+loginNames+'&hashs='+hashs
                    };
                    if(result.state ==0){
                        layer.msg('用户名、密码错误，请重新输入！', {time: 5000, icon:2});
                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $("body").innerHTML = "there is something wrong!";
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
            });
        }
    }

    //验证码60秒倒计时
    var countdown=60;
    function settime(val) {
        debugger
        var sMobile = $('#exampleInputPassword1').val()
        if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(sMobile))){
            alert("不是完整的11位手机号或者正确的手机号前七位");
           // document.mobileform.mobile.focus();
            return false;
        }else {
            yzm()
        }
    }
    function yzm(){
        if (countdown == 0) {
            val.removeAttribute("disabled");
            val.value = "免费获取验证码";
            countdown = 60;
        } else {
            val.setAttribute("disabled", true);
            val.value = "重新发送(" + countdown + ")";
            countdown--;
            setTimeout(function () {
                yzm(val)
            }, 1000)
        }
    }
    //手机登陆
    function settime_phone(val) {
        debugger
        var sMobile = $('#phone').val()
        if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(sMobile))){
            alert("不是完整的11位手机号或者正确的手机号前七位");
        }

    }

</script>

</html>